<template>
  <v-container class="vcontainer">
    <div class="detail-info">
      <template v-if="isHavePatent === true">
        <v-tabs
          v-model="active"
          class="vtab-toggle"
          active-class="vtab-active"
          @change="changeVtb"
        >
          <v-tab
            class="vtab vtab-radius1"
            :class="{ 'no-active': showDropdown }"
          >
            {{ $t("assessment.TechnicalOverview") }}
          </v-tab>
          <v-tab class="vtab vtab-hide"></v-tab>
          <div
            id="drop"
            class="vtab v-tabs__div dropdown"
            :class="{ 'dropdown-active': showDropdown || isDropActive }"
            @click="handleDropdown"
            v-ripple
          >
            <span>
              {{ $t("assessment.PatentInfo")
              }}<i class="el-icon-arrow-down" style="margin-left:4px;"></i
            ></span>
          </div>
          <!-- 核心团队 -->
          <v-tab class="vtab" :class="{ 'no-active': showDropdown }"
            >核心团队</v-tab
          >
          <!-- 技术分析 -->
          <!-- <v-tab class="vtab" :class="{'no-active': showDropdown}">{{$t('assessment.TechnicalAnalysis')}}</v-tab> -->
          <v-tab
            class="vtab vtab-radius2"
            :class="{ 'no-active': showDropdown }"
            >{{ $t("assessment.TechnicalComparison") }}</v-tab
          >
          <!-- 技术概况 -->
          <v-tab-item style="margin-top: 20px;" lazy>
            <TechnologyOverview />
          </v-tab-item>
          <!-- 专利情况 -->
          <v-tab-item style="margin-top: 20px;">
            <PatentList v-show="commandActive === 0" />
            <HighValueMining v-if="commandActive === 1" />
            <PatentDetails v-if="commandActive === 2" />
          </v-tab-item>
          <!-- 技术分析 -->
          <!-- <v-tab-item style="margin-top: 20px;" lazy>
            <TechnicalAnalysis/>
          </v-tab-item> -->
          <!-- 核心团队 -->
          <v-tab-item style="margin-top: 20px;" lazy>
            <Team :initActive="initActive" @getInitActive="getInitActive" />
          </v-tab-item>
          <!-- 技术对比 -->
          <v-tab-item style="margin-top: 20px;" lazy>
            <TechnicalComparison :propCompanyName="watchCompanyName" />
          </v-tab-item>
        </v-tabs>
        <!-- 专利情况-下拉列表 -->
        <v-card id="dropdownList" class="dropdown-list" v-show="showDropdown2">
          <span
            @click="handleCommand(0)"
            @mouseover="mouseOver"
            class="sp1"
            :class="{ 'sp-hover': isSp1 }"
            >{{ $t("assessment.PatentList") }}</span
          >
          <span
            @click="handleCommand(1)"
            @mouseover="mouseOver"
            class="sp2"
            :class="{ 'sp-hover': !isSp1 }"
            >{{ $t("assessment.PatentOperation") }}</span
          >
        </v-card>
      </template>
      <template v-else-if="isHavePatent === false">
        <p style="text-align:center;font-size:18px;">
          未发现此公司的科技信息，请查看其他信息。
        </p>
      </template>
    </div>
  </v-container>
</template>

<script>
import TechnologyOverview from "./TechnologyOverview";
import TechnicalAnalysis from "./TechnicalAnalysis";
import Team from "./team/Index";
import TechnicalComparison from "./TechnicalComparison";
import PatentList from "./PatentList";
import PatentDetails from "./PatentDetails";
import HighValueMining from "./HighValueMining";
export default {
  inject: ["reload"],
  components: {
    TechnologyOverview,
    TechnicalAnalysis,
    Team,
    TechnicalComparison,
    PatentList,
    PatentDetails,
    HighValueMining,
  },
  data() {
    return {
      isHavePatent: "", // 公司是否有专利
      basic: {
        companyName: this.$cookie.get("companyName") || "",
        scores: "", // 技术综合指数
      },
      similarityList: [],
      active: "",
      isDropActive: false, // 专利情况是否选中
      watchCompanyName: "",
      showDropdown: false, // 更改下拉列表颜色
      showDropdown2: false, // 展示下拉列表
      commandActive: "", // 当前选中的列表项
      isSp1: true,
      initActive: 0,
    };
  },
  mounted() {
    this.watchComparison();
    this.computedDropdown();
  },
  methods: {
    // 监听tab页切换
    changeVtb(val) {
      this.showDropdown = false;
      if (this.active !== 1) {
        this.isDropActive = false;
        this.$router.push({
          name: "technologyOverview",
          query: {
            active: val,
          },
        });
      }
      // resize图表
      this.$Bus.$emit("chartResize", {
        active: val,
      });
    },
    // 专利情况
    handleCommand(command) {
      this.showDropdown = false;
      this.active = 1;
      if (command === 0) {
        this.$router.push({
          name: "patentList",
          query: {
            active: this.active,
          },
        });
      } else if (command === 1) {
        this.$router.push({
          name: "highValueMining",
          query: {
            active: this.active,
          },
        });
      }
      this.commandActive = command;
      this.isDropActive = true;
      this.reload();
    },
    //
    getBasicInfo() {
      // 技术综合指数
      this.$get(this.$Url.company.basicInfo, {
        companyName: this.basic.companyName,
        dataType: "patentScore",
      })
        .then((data) => {
          this.basic.scores = data.data.patentScore;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 跳转到技术对比
    goTechComparison(companyName) {
      let that = this;
      this.$get(this.$Url.science.companyCheck, {
        companyName: companyName,
      }).then((res) => {
        if ((res.data && res.data.type == 0) || 2) {
          that.$Bus.$emit("goTechComparison", {
            companyName: companyName,
          });
        }
      });
    },
    // 监听跳转到技术对比的Bus
    watchComparison() {
      this.$Bus.$on("goTechComparison", (data) => {
        this.watchCompanyName = data.companyName;
        if (this.active == 1) {
          this.isDropActive = false;
          this.$router.push({
            name: "technicalComparison",
          });
        } else {
          this.changeVtb(3);
        }
      });
    },
    // 鼠标引入事件，切换专利情况列表选中样式
    mouseOver($event) {
      if ($event.currentTarget.className.indexOf("sp1") > -1) {
        this.isSp1 = true;
      } else {
        this.isSp1 = false;
      }
    },
    handleDropdown() {
      if (this.$route.query.active !== 1) {
        this.showDropdown = !this.showDropdown;
      }
      this.showDropdown2 = !this.showDropdown2;
    },
    // 计算下拉列表样式
    computedDropdown() {
      try {
        let drop = document.getElementById("drop");
        let dropdownList = document.getElementById("dropdownList");
        dropdownList.style.width = drop.offsetWidth + "px";
        dropdownList.style.left = drop.offsetWidth + 20 + "px";
      } catch (error) {}
    },
    // 核心团队默认页面
    getInitActive(active) {
      this.initActive = active;
    },
  },
  watch: {
    "$route.query.active"() {
      if (this.$route.query.active) {
        this.active = Number(this.$route.query.active);
        if (this.active === 1) {
          this.showDropdown = true;
        }
        this.initActive = 0;
      } else {
        this.active = 0;
      }
      this.showDropdown2 = false;
    },
    "$route.name"() {
      let routeName = this.$route.name;
      if (routeName === "patentList") {
        this.commandActive = 0;
      } else if (routeName === "highValueMining") {
        this.commandActive = 1;
      } else if (routeName === "patentDetails") {
        this.commandActive = 2;
      }
    },
  },
  beforeMount() {
    // 判断是否有专利
    if (this.$cookie.get("isHavePatent") === "false") {
      this.isHavePatent = false;
      return;
    } else {
      this.isHavePatent = true;
    }
    this.active = Number(this.$route.query.active) || 0;
    if (this.active === 1) {
      this.isDropActive = true;
      let routeName = this.$route.name;
      if (routeName === "patentList") {
        this.commandActive = 0;
      } else if (routeName === "highValueMining") {
        this.commandActive = 1;
      } else if (routeName === "patentDetails") {
        this.commandActive = 2;
      }
    }
  },
  beforeDestroy() {
    this.$Bus.$off("showConclusion");
    this.$Bus.$off("isShow");
  },
};
</script>

<style scoped>
.vcontainer {
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  padding: 0;
}
.logo {
  width: 100%;
  height: 200px;
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
}
.logo img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
}
.list1,
.list2,
.list3,
.list4 {
  position: relative;
  list-style: none;
  padding: 0 20px;
  margin-top: 20px;
}
.list1 li {
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 12px;
  color: #a7a5d4;
}
.list2 li {
  float: left;
  padding: 6px 18px;
  margin-top: 10px;
  margin-right: 10px;
  border-radius: 15px;
  font-size: 12px;
  background-color: #3d3d57;
  color: #8a88df;
  cursor: default;
}
.list2 .light {
  color: $mainColor;
  background-color: #fff;
}
.list3 li {
  position: relative;
  margin-bottom: 30px;
}
.list3 li p {
  padding-left: 0;
  padding-right: 84px;
  margin-left: 0;
  margin-right: 0;
  font-size: 14px;
  color: #7d90ae;
}
.list3 .vbtn {
  position: absolute;
  top: 50%;
  right: -10px;
  width: 67px;
  height: 30px;
  margin-top: -15px;
  font-size: 12px;
  color: #8a88df;
  background-color: #3d3d57 !important;
}
.list3 .vbtn:hover {
  color: $mainColor;
  background-color: #fff !important;
}
.list4 {
  display: flex;
}
.list4 li {
  flex: 1;
  text-align: center;
  vertical-align: middle;
}
.list4 li div {
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  text-align: center;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 40% auto;
  background-color: #fff;
}
.list4 li:nth-child(1) div {
  background-image: url(./img/base-icon1.png);
}
.list4 li:nth-child(2) div {
  background-image: url(./img/base-icon2.png);
}
.list4 li:nth-child(3) div {
  background-image: url(./img/base-icon3.png);
}
.toggle-btn {
  position: fixed;
  top: 50%;
  left: 409px;
  z-index: 2;
  width: 31px;
  height: 44px;
  margin-top: -22px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  text-align: center;
  font-size: 18px;
  color: $mainColor;
  background-color: #fff;
  cursor: pointer;
}
.toggle-btn:hover {
  background-color: #eee;
}
.toggle-btn-hide {
  width: 24px;
  border: 1px dotted #ccc;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.toggle-btn-icon {
  width: 20px;
  line-height: 44px;
}
.detail-info {
  position: relative;
  padding: 20px;
}
.vtab {
  width: 25%;
  max-width: 600px;
  line-height: 40px;
  font-size: 14px;
  font-weight: 500;
  color: #7674a3 !important;
  background-color: #fff;
}
.vtab-hide {
  position: absolute;
  display: none;
}
.dropdown {
  position: relative;
  display: inline-block;
  padding: 6px 12px;
  opacity: 0.7;
  text-align: center;
  cursor: pointer;
}
.dropdown-active {
  color: #fff !important;
  background-color: $mainColor !important;
  opacity: 1;
}
.dropdown-box {
  position: absolute;
  top: 78px;
  left: 0;
  z-index: 0;
  width: 100%;
  padding-left: 20px;
  box-sizing: border-box;
}
.dropdown-list {
  position: absolute;
  top: 78px;
  left: 0;
  /* margin-left: 25%; */
  text-align: center;
  color: #7674a3;
  background-color: #fafafa;
}
.dropdown-list span {
  display: block;
  line-height: 50px;
  padding: 0 12px;
  cursor: pointer;
}
.sp-hover {
  color: #7674a3;
  background-color: #f2f4fb;
}

/* .el-dropdown {
  color: inherit;
}
.el-dropdown-link {
  font-size: 14px;
  color: inherit;
}
.eldropdown {
  width: 100%;
  padding: 6px 12px;
  text-align: center;
  color: rgba(0,0,0,0.87);
  opacity: 0.7;
} */
</style>
